<template>
	<div class="pic-container">
		<img :src="imgurl" class="pic-container-image" v-if="imgurl">
		<el-upload
      action=""
      :http-request="Upload"
      list-type="picture-card" 
      class="upload-demo"
      :show-file-list="false">
      <i class="el-icon-plus"></i>
    </el-upload>
	</div>
</template>

<script>
	import client  from 'common/js/ossClient.js'
	export default {
		name:'UploadOne',
		props:{
			imgurl:{
				type:String,
				default:''
			},
			limitnum:{
				type:Number,
				default:1
			},
			filedir:{
				type:String,
				default:'default'
			}
		},
		methods:{
			Upload(file) {
				const myloading = this.$loading({
          lock: true,
          text: '拼命上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        const tmpcnt = file.file.name.lastIndexOf(".")
        const exname = file.file.name.substring(tmpcnt + 1)
        const names = ['jpg', 'jpeg', 'webp', 'png','bmp']
        if(names.indexOf(exname)< 0 ){
          this.$message.error("不支持的格式!")
          myloading.close();
          return
        }
        let uid = parseInt(file.file.uid)
        let randnum = Math.random() * 10000000000000
        randnum = Math.floor(randnum)
        let name_num = randnum + uid
        let fileName = this.filedir + '/' + name_num + '.' + exname
        client.put(fileName, file.file).then(res=>{
          if(res.url){
            this.$emit('finishUpload',res.url)
            myloading.close();
          }else{
            this.$message.error('文件上传失败')
            myloading.close();
          }
        }).catch(err=>{})
      }
		}
	}
</script> 

<style scoped>
	.pic-container{
    display:flex;flex-direction:row;height:80px;width:100%;
  }
  .pic-container-image{
    width:80px;height:80px;border-radius:5px;
  }
  .upload-demo /deep/ .el-upload--picture-card{
    height:80px;width:80px;line-height:80px;
  }
  .upload-demo /deep/ .el-upload-list__item{
    height:80px;width:80px;line-height:80px;
  }
</style>